<template>
  <div class="put-forward">
    <div class="div-input">
      <div class="div">
        <label>支付宝账号</label>
        <input type="text" v-model="zfb_code" name="phone" placeholder="请输入提现支付宝账号">
      </div>
      <div class="div border-none">
        <label>支付宝姓名</label>
        <input type="text" v-model="zfb_name" name="name" placeholder="请输入提现支付宝姓名">
      </div>
    </div>
    <div class="div-input matop">     
      <div class="div border-none">
        <label>提现金额</label>
        <input type="number" v-model="zfb_price" name="price" :placeholder="current_price">
      </div>
    </div>
    <p class="tip">提现额外扣除 ¥{{rate*zfb_price}} 服务费</p>
    <span class="submit-btn" @click="submit">确认提现{{(zfb_price.length > 0) ? (zfb_price-rate*zfb_price)+'元' : ''}}</span>
    <p class="shenhe">提现审核通过后1~2工作日内可到账</p>
  </div>
</template>

<script type="text/javascript">
  import { personCenter, getFuWuFei, withdrawal_huiyuan } from '@/api/api'
  import { AlertModule } from 'vux'
  export default {
    components: {
    },
    data () {
      return {
        current_price: '当前金额20元',
        zfb_code: '',
        zfb_name: '',
        zfb_price: '',
        price: '',
        rate: '',
      }
    },
    created () {
      this.uid = sessionStorage.getItem('uid')
      this.person_center();
      this.get_fuwufei();
    },
    methods: {    
      router (path) {
        this.$router.push(path)
      },
      person_center() {
        personCenter(this.uid).then((res) => {
          this.price = res.data.info.money
          this.current_price = '当前金额'+this.price+'元';
        }).catch((err) => {
          console.log(err)
        })
      },
      submit() {
        if(!this.zfb_code || !this.zfb_name || !this.zfb_price){
          AlertModule.show({
            title: '温馨提示',
            content: '请填写内容'
          })
          return;
        }else if(this.zfb_price > this.price){
          AlertModule.show({
            title: '温馨提示',
            content: '提现金额不能大于拥有金额'
          })
          return;
        }
        let dataJson = {
          uid: this.uid,
          withdrawal_name: this.zfb_code,
          withdrawal_username: this.zfb_name,
          withdrawal_money: this.zfb_price - this.rate * this.zfb_price,
        }
        withdrawal_huiyuan(dataJson).then((res) => {
          console.log(res)
          AlertModule.show({
            title: '温馨提示',
            content: res.data.msg,
            onHide: () => {
              this.router({path: './person'})
            }
          })
        }).catch((err) => {
          console.dir(err)
        })
      },
      get_fuwufei() {
        getFuWuFei().then((res) => {
          this.rate = res.data.info
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .put-forward
    background-color #f2f2f2
    height 100vh
    width 100vw
    .matop
      margin-top 1rem
    .div-input
      background-color #fff
      .div
        margin 0 1.5rem
        border-bottom 1px solid #e5e5e5
        display flex
        line-height 5rem
        height 5rem
        overflow hidden
        position relative
        input
          color #333
          background-color #fff
          height 5rem
          line-height 5rem
          padding-left 1.5rem
          outline none
          &::-webkit-input-placeholder
            color #999
        span
          width 9.2rem
          height 3.3rem
          line-height 3.3rem
          text-align center
          background-color #ff659b
          border-radius .3rem
          position absolute
          right 1.5rem
          color #F5F5FA
          font-size 1.5rem
          top .85rem
      .border-none
        border none
    .tip
      margin-top 1.5rem
      margin-left 1.5rem
      color #999999
      font-size 1.2rem
    .submit-btn
      line-height 5rem
      background-color #43A047
      border-radius .3rem
      width 92%
      position relative
      left 4%
      display block
      text-align center
      font-size 1.6rem
      font-weight 500
      color #FFFFFF
      margin-top 3rem
    .shenhe
      text-align center
      margin-top 1.5rem
      color #939393
      font-size 1.2rem
</style>